<template>
    <div class="outer">
        <div class="inner">

            <div class="select_panel">

                <div class="each_line">
                    <div class="jiage_zonglei select_title">价格总类：</div>
                    <div class="head_content">
                        <div class="radio_wapper">
                            <el-radio v-model="radioCheck" label="0" class="myradio">
                                <div class="radio_inner">所有</div>
                            </el-radio>
                        </div>

                        <!--                        <div class="radio_wapper">-->
                        <!--                            <el-radio v-model="radioCheck" label="2" class="myradio">-->
                        <!--                                <div class="radio_inner">免费</div>-->
                        <!--                            </el-radio>-->
                        <!--                        </div>-->

                        <!--                        <div class="radio_wapper">-->
                        <!--                            <el-radio v-model="radioCheck" label="1" class="myradio">-->
                        <!--                                <div class="radio_inner">付费</div>-->
                        <!--                            </el-radio>-->
                        <!--                        </div>-->


                    </div>

<!--                      <div class="fold" @click="fold">-->
<!--                          隐藏更多<i :class="isFold? 'el-icon-arrow-down': 'el-icon-arrow-up'" style="margin-left: 4px;"></i>-->
<!--                      </div>-->

                </div>

                <!--                    数据循环部分-->
                <div class="each_line" v-for="outerItem in typeList" :key="outerItem.creationTypeModel.id">
                    <div class="select_title">{{outerItem.creationTypeModel.creationTypeName}}:</div>
                    <div class="select_content">

                        <div class="radio_wapper" v-for="innerItem in outerItem.creationTypeModels" :key="innerItem.id">
                            <el-checkbox v-model="checkList" :label="innerItem.id" class="myradio">
                                <div class="radio_inner">{{innerItem.creationTypeName}}</div>
                            </el-checkbox>
                        </div>

                    </div>

                </div>

            </div>

<!--            <div class="jiezhi_riqi">-->
<!--                <div class="jiezhi_title">截止日期:</div>-->
<!--                <div class="jiezhi_content">-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="jiezhi_riqi" :label="0">所有</el-radio>-->
<!--                    </div>-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="jiezhi_riqi" :label="1">一天内到期</el-radio>-->
<!--                    </div>-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="jiezhi_riqi" :label="3">三天内到期</el-radio>-->
<!--                    </div>-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="jiezhi_riqi" :label="7">七天内到期</el-radio>-->
<!--                    </div>-->
<!--                </div>-->
<!--            </div>-->

            <!--            和截止日期公用一套css-->
<!--            <div class="zhenggao_zhuangtai">-->

<!--                <div class="jiezhi_title">征稿状态:</div>-->
<!--                <div class="jiezhi_content">-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="zhenggao_zhuangtai" :label="0">所有</el-radio>-->
<!--                    </div>-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="zhenggao_zhuangtai" :label="1">征稿中</el-radio>-->
<!--                    </div>-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="zhenggao_zhuangtai" :label="2">选稿中</el-radio>-->
<!--                    </div>-->
<!--                    <div class="jiezhi_radio">-->
<!--                        <el-radio v-model="zhenggao_zhuangtai" :label="3">已完成</el-radio>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->



            <div class="articleList">
                <div v-for="item in articleList" :key="item.id" class="listItem" @click.stop="to_zj_detail(item.id)">
                    <div class="item_category">
                        <div class="item_category_inner">
                            {{getTypeName(item)}}
                        </div>
                    </div>
                    <div class="item_right">
                        <div class="title_author_price">
                            <div class="title_author">
                                <div class="title">{{item.title}}</div>
                                <div class="author">对标账号：{{item.accountNumber}}</div>
                            </div>
                            <!--                            <div class="price">￥200</div>-->
                        </div>
                        <div class="item_content" :innerHTML="item.detailContent">

                        </div>

                        <div class="collect_start_price">
                            <div class="collect_start">

                                <span>已投稿件:{{item.submitWriting.length}}</span>

<!--                                <span style="margin-left: 30px">截止时间:{{item.deadlineDays}}天</span>-->

                            </div>
                            <template v-if="item.earnestMoney == null">
                                <div class="price">免费</div>
                            </template>
                            <template v-else>
                                <div class="price">￥{{item.earnestMoney}}</div>
                            </template>
                        </div>

                        <div class="item_choose">
                            <div @click.stop="tou_gao(item)">投稿</div>
                        </div>

                    </div>
                </div>
            </div>

            <div class="fen_ye_qi">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="total"
                        @current-change="currentChange"
                        :current-page="current_page"
                        @prev-click="prevClick"
                        @next-click="nextClick">
                </el-pagination>
            </div>


        </div>

        <el-dialog v-model="dialogVisible" title="选择剧本投稿" width="30%">
            <el-divider style="margin-top: -20px;"></el-divider>
            <div>请选择为该征稿创作的剧本：</div>
            <el-select v-model="value" multiple placeholder="Select">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                >
                </el-option>
            </el-select>

            <div v-if="options.length == 0" style="color: red;font-size: 12px;margin-top: 5px;">暂无可投稿作品，请先发布剧本</div>

            <div style="display: flex;margin-top: 15px;background: #f5f5f5;height: 100px;overflow: hidden;">
                <span>投稿须知：</span>
                <div :innerHTML="tougao_item.detailContent" style="max-height: 100px;overflow: hidden"></div>
            </div>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit_tougao()">确认</el-button>
                </span>
            </template>

        </el-dialog>

    </div>
</template>

<script>

    import {ScriptWritingListByWhere} from "../../../api/ScriptWriting";
    import {IndexCreationTypeListByTypeId} from "../../../api/ScriptWriting";
    import {WorksCallupList} from "../../../api/dsp/WorksCallupList";
    import {ElMessageBox} from 'element-plus'
    import {GetAuthorDetail} from "../../../api/dsp/dsp_author_detail";
    import {getUserInfo} from "../../../utils/auth";
    import {SubmitWriting} from "../../../api/ScriptWriting";

    export default {
        name: "dsp_zj",
        watch: {
            radioCheck() {

                this.requestContentList()

            },
            checkList() {

                this.requestContentList()

            },
            jiezhi_riqi() {

                this.requestContentList()

            },
            zhenggao_zhuangtai() {
                this.requestContentList()
            },

        },
        data() {
            return {
                isFold: true,
                folding_or_not: {},
                articleList: [],
                total: undefined,
                current_page: 1,
                typeList: [],
                checkList: [],
                checkRows: 0,
                radioCheck: '0',

                jiezhi_riqi: 0,
                zhenggao_zhuangtai: 0,

                list: [
                    {id: 1},
                    {id: 2},
                    {id: 3},
                    {id: 4},
                    {id: 5},
                    {id: 6},
                    {id: 7},
                    {id: 8},
                ],

                dialogVisible: false,
                authorMessage:{},
                tougao_item:{},
                value:[],
                options:[
                    {
                        value: {},
                        label: 'Option1',
                    },
                    {
                        value: {},
                        label: 'Option2',
                    },
                    {
                        value: {},
                        label: 'Option3',
                    },
                    {
                        value: {},
                        label: 'Option4',
                    },
                    {
                        value: {},
                        label: 'Option5',
                    },
                ]

            }
        },

        mounted() {

            //初始化下拉框高度
            this.folding_or_not.height = "52px"

            //    获取创作类型列表数据
            IndexCreationTypeListByTypeId({typeid: 1}).then(res => {
                this.typeList = res.data
                let totalCount = 0
                res.data.forEach(item => {
                    totalCount = totalCount + item.creationTypeModels.length
                })

                //先计算出满行
                if (totalCount <= 8) {
                    this.checkRows = 1
                } else {
                    this.checkRows = parseInt(totalCount / 8)
                    this.checkRows = this.checkRows + 1
                }

                //第一次请求回来后再发送请求
                this.requestContentList()
            })


        },

        methods: {

            //折叠
            fold() {
                if (this.isFold) {

                    //根据返回回来的 数据 动态设置 选择面板的高度
                    //多一行多51px
                    this.folding_or_not.height = (52 + (this.checkRows * 53)) + "px"
                    // this.folding_or_not.height=undefined
                } else {
                    this.folding_or_not.height = "52px"
                }

                this.isFold = !this.isFold;
            },

            getTypeName(data) {
                let res = ''
                data.worksCallupCreationType.forEach(item => {
                    res += item.creationTypeName
                })
                return res
            },

            requestContentList() {
                //    获得作品列表数据
                let data = {
                    creationTypeId: 1,
                    classifyIds: this.checkList.join(','),
                    accountNumber: this.jiezhi_riqi,
                    callupState: this.zhenggao_zhuangtai,
                    page: this.current_page,
                    pagesize: 8,
                }
                if (data.accountNumber == 0) {
                    delete data.accountNumber
                }
                if (data.callupState == 0) {
                    delete data.callupState
                }
                WorksCallupList(data).then(res => {
                    //获取数据
                    this.articleList = res.data.list

                    console.log('数据维', this.articleList)

                    //   判断总共有多少页

                    if (res.data.total <= 8) {
                        this.total = 10
                    } else {
                        //    判断总数是否为8的整倍数
                        if ((parseInt(res.data.total) % 8) != 0) {

                            this.total = parseInt(parseInt(res.data.total) / 8) * 10 + 10

                        } else {

                            this.total = parseInt(parseInt(res.data.total) / 8) * 10

                        }

                    }
                })

            },

            to_zj_detail(id) {

                this.$router.push({path: '/dsp/zjDetail', query: {id}})

            },

            tou_gao(data) {
                this.dialogVisible=true
                this.tougao_item=data
                GetAuthorDetail({id:JSON.parse(getUserInfo()).id,creationTypeId: 1}).then(res=>{

                    this.authorMessage=res.data[0]
                    console.log('这个作者的信息为',this.authorMessage)
                    this.options=this.authorMessage.scriptWriting

                    //已上架的作品才能投稿
                    this.options=this.options.filter(item=>{
                        return item.workState == 5
                    })

                    console.log('过滤后的options',this.options)

                    this.options.forEach(item=>{
                        console.log('idwe',this.tougao_item.id)
                        item.label=item.title

                        item.value={}
                        item.value.Id=this.tougao_item.id
                        item.value.SubmitWriting=item
                        item.value.SubmitWriting.WorksCallupId=this.tougao_item.id
                        item.value.SubmitWriting.ScriptWritingId=item.value.SubmitWriting.id
                        item.value.SubmitWriting.TransactionID=item.value.SubmitWriting.hashCode
                        item.value.SubmitWriting.WorksId=item.value.SubmitWriting.tokenId
                        item.value.SubmitWriting.PublisherIdentity=this.authorMessage.publisherIdentity
                        item.value.SubmitWriting.ContractId=item.value.SubmitWriting.contractId

                        console.log('mmmmmmmm',item)
                    })

                })

            },
            submit_tougao(){

                this.dialogVisible=false
                console.log('yueyeye',this.value)
                let data={}
                data.Id=this.tougao_item.id
                data.SubmitWriting=[]
                this.value.forEach(item=>{
                    let temp={}
                    temp.WorksCallupId=item.SubmitWriting.WorksCallupId
                    temp.ScriptWritingId=item.SubmitWriting.ScriptWritingId
                    temp.TransactionID=item.SubmitWriting.TransactionID
                    temp.WorksId=item.SubmitWriting.WorksId
                    temp.PublisherIdentity=item.SubmitWriting.PublisherIdentity
                    temp.ContractId=item.SubmitWriting.ContractId

                    data.SubmitWriting.push(temp)

                })
                console.log('里演的数据',JSON.stringify(data))
                console.log('hehehehe',this.detailJSON(this.value))
                SubmitWriting(data).then(res=>{
                    console.log('结果为为',res)
                    if(res.code == 0){
                        this.$message.success(res.data)
                    }else{
                        this.$message.error(res.data)
                    }
                })

            },


            detailJSON(org){
                var cache = [];
                var str = JSON.stringify(org, function(key, value) {
                    if (typeof value === 'object' && value !== null) {
                        if (cache.indexOf(value) !== -1) {
                            // Circular reference found, discard key
                            return;
                        }
                        // Store value in our collection
                        cache.push(value);
                    }
                    return value;
                });
                return str
            },


            handleClose() {

            },

            //改变当前页
            currentChange(res) {
                this.current_page = res

                this.requestContentList()

            },

            //上一页
            prevClick() {

            },

            //下一页
            nextClick() {
            },


        },

    }
</script>

<style scoped>
    .outer {
        width: 100%;
        overflow: hidden;
    }

    .inner {
        width: 1001px;
        margin: 0px auto;
        margin-top: 15px;
    }

    .select_panel {
        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        margin-top: 15px;
        transition: 0.5s;
        overflow: hidden;
    }

    .select_panel > div {
        border-bottom: 1px solid #E5E5E5;;
    }

    .each_line {
        display: flex;
        width: 100%;
        min-height: 52px;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
    }

    .jiage_zonglei {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 14px;
    }

    .select_title {
        /*width: 76px;*/
        margin-left: 42px;
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
        line-height: 52px;

        /*文字溢出省略号*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .head_content {
        width: 769px;
        height: 52px;
        display: flex;
        align-items: center;
        margin-left: 10px;
    }

    .select_content {
        width: 856px;
        min-height: 52px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        margin-left: 10px;
    }

    .radio_wapper {
        width: 107px;
        height: 52px;
        line-height: 52px;
    }

    .myradio {
        /*margin-left: -30px;*/
    }

    .select_content > .myradio:nth-of-type(1) {
        margin-left: 0px;
    }

    .radio_inner {
        width: 87px;
        margin-left: -4px;

        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        /*line-height: 12px;*/


        /*文字溢出省略号*/
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .fold {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #666666;
        cursor: pointer;
    }

    .jiezhi_riqi {
        width: 100%;
        height: 52px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
    }

    .jiezhi_title {
        width: 102px;
        text-align: right;
        font-size: 14px;
        line-height: 52px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .jiezhi_content {
        flex-grow: 1;
        margin-left: 22px;
        display: flex;
        align-items: center;

    }

    .jiezhi_content > div {
        width: 107px;
    }

    .jiezhi_radio /deep/ .el-radio {
        height: 19px;
        font-size: 19px;
        line-height: 19px;
        margin-left: 4px;
    }

    .zhenggao_zhuangtai {
        width: 100%;
        height: 52px;
        margin-top: 10px;
        display: flex;
        justify-content: space-between;

        background: #FFFFFF;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
    }

    .articleList {
        width: 100%;
        /*height: 1180px;*/
        min-height: 280px;
        max-height: 1200px;
        margin-top: 22px;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .listItem {
        width: 490px;
        height: 280px;
        background: #EEEEEE;
        box-shadow: 0px 0px 21px 0px rgba(17, 16, 16, 0.07);
        border-radius: 4px;
        display: flex;
        margin-bottom: 20px;
        cursor: pointer;

    }

    .item_category {
        width: 50px;
        height: 280px;
        background: #2EB0C6;
        border-radius: 4px 0px 0px 4px;
        display: flex;
        align-items: center;
    }

    .item_category_inner {
        width: 17px;
        min-height: 0px;
        max-height: 255px;
        /*height: 100px;*/
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #FFFFFF;
        line-height: 28px;
        margin: 0px auto;

        overflow: hidden;

    }

    .item_right {
        flex-grow: 1;
        background: #FFFFFF;
        position: relative;
    }

    .title_author_price {
        width: 391px;
        display: flex;
        justify-content: space-between;
        margin: 0px auto;
    }

    .title_author {
        margin-top: 31px;
    }

    .title_author > div {
        max-width: 322px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .title {
        height: 16px;
        font-size: 16px;
        line-height: 16px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
    }

    .author {
        margin-top: 14px;
        /*height: 14px;*/
        font-size: 14px ;
        /*line-height: 14px;*/
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #333333;
    }

    .price {
        /*margin-top: 37px;*/
        height: 20px;
        font-size: 20px;
        line-height: 20px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #FF4444;
        margin-right: 10px;
    }

    .item_content {

        width: 391px;
        height: 47px;
        font-size: 14px;
        line-height: 25px;
        margin: 0px auto;
        margin-top: 29px;

        /*多行文本溢出省略号*/
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;

    }

    .collect_start_price {
        width: 391px;
        margin: 0px auto;
        margin-top: 25px;
        display: flex;
        justify-content: space-between;
    }

    .collect, .start {
        font-size: 15px;
        line-height: 15px;
        cursor: pointer;
    }

    .start {
        margin-left: 17px;
    }

    .collect_select {
        color: yellow;
    }

    .collect_text, .start_text {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #686F7A;
        line-height: 14px;
        margin-left: 4px;
    }

    .item_choose {
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 70px;
        border-top: 1px solid #E5E5E5;
        display: flex;
        justify-content: end;
        align-items: center;
    }

    .item_choose > div {
        height: 36px;
        line-height: 36px;
        cursor: pointer;
        text-align: center;
    }

    .item_choose > div:nth-of-type(1) {
        width: 92px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-right: 25px;
    }

    .item_choose > div:nth-of-type(2) {
        width: 92px;
        height: 36px;
        background: rgba(246, 246, 246, 0.15);
        border: 1px solid #9D9D9D;
        border-radius: 4px;

        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: bold;
        color: #333333;
        margin-right: 119px;
    }

    .fen_ye_qi {
        min-width: 109px;
        max-width: 430px;
        margin: 0px auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-top: 26px;
        margin-bottom: 115px;
    }

</style>
